<template>
  <div>
    <el-form :inline="true" class="user-search">
      <el-button size="small" type="primary" icon="el-icon-plus" @click="doAdd">增加</el-button>
    </el-form>
    <br />

    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuId" border default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }">
      <el-table-column label="名称" prop="name" :cell-style="{ textAlign: 'center' }">
      </el-table-column>
      <el-table-column label="上级菜单" prop="parentId">
        <template scope="scope">
          <p v-if="scope.row.parentId==1">系统管理</p>
          <p v-if="scope.row.parentId==5">酒店管理</p>
          <p v-if="scope.row.parentId==16">房型管理</p>
          <p v-if="scope.row.parentId==19">系统设置</p>
          <p v-if="scope.row.parentId==21">订单管理</p>
          <p v-if="scope.row.parentId==23">数据概览</p>
        </template>
      </el-table-column>
      <el-table-column label="图标" prop="icon">
      </el-table-column>
      <el-table-column label="类型" prop="type">
        <template scope="scope">
          <p v-if="scope.row.type==0">目录</p>
          <p v-if="scope.row.type==1">菜单</p>
        </template>
      </el-table-column>
      <el-table-column label="排序号" prop="orderNum">
      </el-table-column>
      <el-table-column label="菜单URL" prop="url">
      </el-table-column>
      <el-table-column label="授权标识" prop="perms">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link target="_blank" @click="doDel(scope.$index, scope.row)">删除</el-link>
          <el-link target="_blank" @click="doEdit(scope.$index, scope.row)">修改</el-link>
          <!-- <el-input type="hidden" v-model="mergeForm.userId"></el-input> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="操作" :visible.sync="dialogMergeFormVisible">
      <el-form :model="mergeForm" :rules="mergeFormRules" ref="mergeForm" label-width="100px">
        <el-form-item label="类型" prop="type">
          <el-radio v-model="radio" label="0">目录</el-radio>
          <el-radio v-model="radio" label="1">菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="mergeForm.name" autocomplete="off" placeholder="菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-select size="small" v-model="mergeForm.parentId" clearable placeholder="请选择" @change="selectGet">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单路由" prop="url">
          <el-input v-model="mergeForm.url" autocomplete="off" placeholder="菜单路由"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="orderNum">
          <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="mergeForm.icon" autocomplete="off" placeholder="菜单图标名称"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMergeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSubmit">确 定</el-button>
        <el-input type="hidden" v-model="mergeForm.parentId"></el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mergeForm: {
          menuId: null,
          parentId: null,
          name: null,
          url: null,
          perms: null,
          type: null,
          icon: null,
          orderNum: null
        },
        tableData: [{
          children: []
        }],
        dialogMergeFormVisible: false,
        options: [{
          value: '1',
          label: '系统管理'
        }, {
          value: '5',
          label: '酒店管理'
        },{
          value: '16',
          label: '房型管理'
        },{
          value: '19',
          label: '系统设置'
        },{
          value: '21',
          label: '订单管理'
        },{
          value: '23',
          label: '数据概览'
        }],
        num: 1,
        radio: '0'
      }
    },
    beforeCreate() {
      this.axios.post(this.axios.urls.SYS_MENU_LIST, this.user).then((response) => {
        let tableData = response.data.result
        console.log(tableData)
        this.tableData = tableData
      })
    },
    methods: {
      selectGet: function(val) {
        let obj = {}
        obj = this.options.find((item) => {
          return item.value === val
        })
        this.mergeForm.parentId = obj.value
      },
      handleChange(value) {
        this.mergeForm.orderNum = value.num
      },
      doAdd: function() {
        this.dialogMergeFormVisible = true
      },
      doEdit: function(index, row) {
       this.mergeForm.type = row.type
       this.mergeForm.name = row.name
       this.mergeForm.parentId = row.parentId
       this.mergeForm.url = row.url
       this.mergeForm.orderNum = row.orderNum
       this.mergeForm.icon = row.icon

       this.dialogMergeFormVisible = true
      },
      doDel: function(index, row) {
        this.$confirm('您确定要删除该条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(this.axios.urls.SYS_MENU_DEL, {
            userId: row.menuId
          }).then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.list()
          })
        })
      },
      doSubmit: function() {
        this.mergeForm.orderNum = this.num
        this.mergeForm.type = this.radio
        // console.log(this.mergeForm.orderNum)
        this.axios.post(this.axios.urls.SYS_MENU_MERGE, this.mergeForm).then((response) => {
          this.$message({
            type: 'success',
            message: response.data.message
          })
        })
        if (!this.mergeForm.menuId) {
          this.dialogMergeFormVisible = false
          this.queryForm.page = 1
          this.list()
        }
      }
    },
    watch: {
      dialogMergeFormVisible: function(val, oldval) {
        if (false === val) {
          this.mergeForm.type = null
          this.mergeForm.name = null
          this.mergeForm.parentId = null
          this.mergeForm.url = null
          this.mergeForm.orderNum = null
          this.mergeForm.icon = null
        }
      }
    }
  }
</script>

<style>
</style>
